<template>
	<view class="container">
		<view class="page-top">
			收支统计
		</view>
		<!-- 内容区 -->
		<swiper class="swiper-view">
			<swiper-item class="swiper-item" v-for="cashItem, index in statistics_list" :key="index">
				<text :class="['swiper-item-title',index== 0?'money-red':'money-green']">
					<uni-icons type="left" size="16" :color="index== 0?'money-red':'money-green'"
						@click="queryChangeMonth(-1)"></uni-icons>
					<text class="swiper-item-title-text">
						<uni-dateformat :date="queryMonth" format="yyyy年MM月 ·"></uni-dateformat>
						{{ index== 0?'支出':index== 1?'收入':'转账' }}
					</text>
					<uni-icons type="right" size="16" :color="index== 0?'money-red':'money-green'"
						@click="queryChangeMonth(1)"></uni-icons>
				</text>
				<view class="swiper-item-chart">
					<qiun-data-charts type="ring" :opts="opts" :loadingType="0" :tapLegend="false"
						:chartData="index== 0? chartData_zc : index== 1 ? chartData_sr : chartData_zz"
						tooltipFormat="myTooltip_statistics" />
				</view>
				<view :class="['swiper-item-total',index== 0?'money-red':'money-green']">
					{{(index==0?'总支出':index==1?'总收入':'转账') + ' ￥ ' + (index==0?total_zc:index==1?total_sr:total_zz) }}
				</view>
				<view class="swiper-item-list">
					<view class="swiper-item-list-item" v-for="item,index2 in cashItem" :key="index2"
						@click="goCashLogDay(item)">
						<view class="pay-list-item-left">
							<image class="item-info-icon" mode="aspectFit" :src="item.icon"></image>
						</view>
						<view class="pay-list-item-right">
							<view class="cash_type_name">
								<view class="cash_type_name_left" v-if="item.payType==1">
									{{item.cashType +'（ '+item.num+'笔 | '+ (eq(total_sr,0)?'0':mul(div(item.total, total_sr),100)) +'% ）'}}
								</view>
								<view class="cash_type_name_left" v-if="item.payType==2">
									{{item.cashType +'（ '+item.num+'笔 | '+ (eq(total_zc,0)?'0':mul(div(item.total, total_zc),100))+'% ）'}}
								</view>
								<view class="cash_type_name_left" v-if="item.payType==3">
									{{item.cashType +'（ '+item.num+'笔 | '+ (eq(total_zz,0)?'0':mul(div(item.total, total_zz),100)) +'% ）'}}
								</view>
								<view class="cash_type_name_right">
									{{'￥' + item.total}}
								</view>
							</view>
							<view class="cash_type_value">
								<progress :stroke-width="12" :backgroundColor="index == 0?'#ffe6e7':'#d3fddd'"
									:activeColor="index == 0?'#ff0000':'#07C160'"
									:percent="mul(div(item.total, item.payType==1?total_sr:item.payType==2?total_zc:total_zz),100)" />
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	import {
		onUnmounted,
		ref
	} from 'vue'
	import {
		onPullDownRefresh,
		onShow,
		onBackPress
	} from '@dcloudio/uni-app'
	import {
		getNowMonth,
		formatMoney,
		getMonthOfAdd
	} from '@/utils/utils.js'
	import {
		getCashLogListForDate,
		getAccountMoneyTotalForMonth,
		getCashTypeList
	} from '@/service/service-api.js'
	import {
		gt,
		lt,
		gteq,
		lteq,
		eq,
		div,
		negate,
		sub,
		add,
		mul
	} from '@/utils/math-utils'

	const opts = ref({
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [5, 5, 5, 5],
		dataLabel: true, // 是否显示面板数据
		enableScroll: false,
		legend: { // 图例显示
			show: false,
			position: "right",
			lineHeight: 25
		},
		title: {
			name: "",
			fontSize: 15,
			color: "#666666"
		},
		subtitle: {
			name: "",
			fontSize: 25,
			color: "#7cb5ec"
		},
		extra: {
			tooltip: {
				bgColor: '#000000',
				bgOpacity: 0.5,
				fontColor: '#ffffff',
				fontSize: 10,
				lineHeight: 14,
				borderRadius: 4,
				legendShow: false // 是否显示左侧图例图标
			},
			ring: {
				ringWidth: 40, // 圆环的宽度
				activeOpacity: 0.5, // 启用Tooltip点击时，突出部分的透明度
				activeRadius: 0, // 启用Tooltip点击时，突出部分的宽度
				offsetAngle: 0, // 起始角度偏移度数，顺时针方向，起点为3点钟位置为0度
				labelWidth: 15, // 数据标签到饼图外圆连线的长度
				border: false, // 是否绘制各类别中间的分割线
				borderWidth: 3, // 分割线的宽度
				borderColor: "#FFFFFF" // 分割线的颜色
			}
		}
	}) // 图表配置
	const chartData_zc = ref({}) // 支出图表数据
	const chartData_sr = ref({}) // 收入图表数据
	const chartData_zz = ref({}) // 转账图表数据
	const statistics_list = ref([]) // 支出列表数据
	const total_zc = ref("0") // 支出总金额
	const total_sr = ref("0") // 收入总金额
	const total_zz = ref("0") // 转账总金额
	const queryMonth = ref(getNowMonth()) // 转账总金额

	onShow(() => {
		getListData()
	})

	// 在组件卸载时
	onUnmounted(() => {});

	// 获取数据
	const getListData = () => {
		let data = getCashLogListForDate(queryMonth.value)
		let list = data.list

		let cashTypeList = getCashTypeList()
		for (let cashType of cashTypeList) {
			cashType.total = '0'
			cashType.num = 0
			for (const item of list) {
				if (item.payType == cashType.payType && item.cashType == cashType.cashType) {
					cashType.total = add(cashType.total, lt(item.money, 0) ? negate(item.money) : item.money)
					cashType.num = cashType.num + 1
				}
			}
		}

		// 按最近使用排序，如果按金额的话，每个月排序都不一样，看不到对应类的变化。
		cashTypeList.sort((a, b) => gt(b.sortNum, a.sortNum) ? 1 : -1)

		let list_1 = []
		let list_2 = []
		let list_3 = []
		let chartData_list_1 = []
		let chartData_list_2 = []
		let chartData_list_3 = []
		let total_1 = "0"
		let total_2 = "0"
		let total_3 = "0"
		for (let cashType of cashTypeList) {
			if (cashType.payType == 1) {
				total_1 = add(total_1, cashType.total)
				list_1.push(cashType)
				if (!eq(cashType.total, 0)) {
					chartData_list_1.push({
						name: cashType.cashType,
						value: Number(cashType.total),
						labelText: cashType.cashType.length > 4 ? (cashType.cashType.slice(0, 4) + '...') :
							cashType.cashType
					})
				}
			} else if (cashType.payType == 2) {
				total_2 = add(total_2, cashType.total)
				list_2.push(cashType)
				if (!eq(cashType.total, 0)) {
					chartData_list_2.push({
						name: cashType.cashType,
						value: Number(cashType.total),
						labelText: cashType.cashType.length > 4 ? (cashType.cashType.slice(0, 4) + '...') :
							cashType.cashType
					})
				}
			} else if (cashType.payType == 3) {
				total_3 = add(total_3, cashType.total)
				list_3.push(cashType)
				if (!eq(cashType.total, 0)) {
					chartData_list_3.push({
						name: cashType.cashType,
						value: Number(cashType.total),
						labelText: cashType.cashType.length > 4 ? (cashType.cashType.slice(0, 4) + '...') :
							cashType.cashType
					})
				}
			}
		}

		statistics_list.value = [list_2, list_1, list_3]
		total_zc.value = total_2
		total_sr.value = total_1
		total_zz.value = total_3

		if (chartData_list_1.length == 0) {
			chartData_list_1.push({
				name: '收入',
				value: 0,
				labelText: '空'
			})
		}
		if (chartData_list_2.length == 0) {
			chartData_list_2.push({
				name: '支出',
				value: 0,
				labelText: '空'
			})
		}
		if (chartData_list_3.length == 0) {
			chartData_list_3.push({
				name: '转账',
				value: 0,
				labelText: '空'
			})
		}

		chartData_zc.value = {
			series: [{
				data: chartData_list_2
			}]
		}
		chartData_sr.value = {
			series: [{
				data: chartData_list_1
			}]
		}
		chartData_zz.value = {
			series: [{
				data: chartData_list_3
			}]
		}
	}

	// 上/下一月
	const queryChangeMonth = (change) => {
		queryMonth.value = getMonthOfAdd(queryMonth.value, change)
		getListData()
	}

	// 前往每日交易明细
	const goCashLogDay = (item) => {
		uni.navigateTo({
			url: '/pages/cash_log_day/cash-log-day?date=' + queryMonth.value + '&payType=' + item.payType +
				'&cashType=' + item.cashType
		})
	}
</script>

<style lang="scss">
	@import url("statistics.css");
</style>